<template>
  <div :class="styles['list-container']">
    <el-checkbox
        v-if="config.ElCheckbox_checkAll_open"
        v-model="allCheck.checked"
        :indeterminate="allCheck.isIndeterminate"
        :class="styles['checkbox']"
        @change="handleCheckedAll"
        label="全选"
    />
    <PackageList
        ref="packageListRef"
        :table="table"
        :pagination="pagination"
        :loading="loading"
        @handleDetail="(...args) => emit('handleDetail', ...args)"
        @handleChecked="handleChecked"
    />
    <el-button v-if="config.ElButton_batchPicking_open" @click="onBatchPinkOutStore" type="primary" :class="styles['button']" size="large" style="width: 200px">批量拣货出仓</el-button>
    <el-button v-if="config.ElButton_confirmPicking_open" @click="confirmPinkOutStore" type="primary" :class="styles['button']" size="large" style="width: 200px">确认已拣货出仓</el-button>
    <el-button v-if="config.ElButton_batchSend_open" type="primary" @click="onBatchSend" :class="styles['button']" size="large" style="width: 200px">批量发货</el-button>
    <OrderLogisticsDialog
        v-if="config.OrderLogisticsDialog_writeSend_open"
        :open="orderLogisticsDialog.open"
        :cardIds="orderLogisticsDialog.cardIds"
        @close="orderLogisticsDialog.open = false"
        @confirm="onLoad"
    />
  </div>
</template>

<script setup name="OutStoreList">
import {computed, onMounted, reactive, ref} from 'vue'
import { PackageList } from '@/components'
import OrderLogisticsDialog from './OrderLogisticsDialog'
import {useList} from '@/hooks'
import configMap from './mixins'
import {confirmPickApi, getOutOrderListApi} from '@/service/outStore'
import {ElMessage} from 'element-plus'

const props = defineProps({
  cardStatus: Number
})

const emit = defineEmits(['handleDetail', 'batchPinkOutStore'])

const packageListRef = ref(null)
const config = computed(() => configMap.get(props.cardStatus))

// list组件数据
const [loading, table, pagination] = useList({
  columns: config.value.tableColumns,
  load: onLoad
})

// 选择按钮操作
const allCheck = reactive({
  checked: false, // 全选
  isIndeterminate: false, // 半选
  checkedRows: [] // 已选行数据
})

// 填写订单发货物流信息弹窗
const orderLogisticsDialog = reactive({
  open: false,
  cardIds: []
})

// 操作复选框单选
function handleChecked ({allChecked, isIndeterminate, checkedRows}) {
  allCheck.checked = allChecked
  allCheck.isIndeterminate = isIndeterminate
  allCheck.checkedRows = checkedRows
}
// 操作全选/全不选
function handleCheckedAll (val) {
  packageListRef.value.handleCheckedAll(val)
}

// 批量拣货出仓
function onBatchPinkOutStore () {
  // 没选订单提示
  if (!allCheck.checkedRows.length) return ElMessage.warning('请选择需拣货出仓的订单！')
  emit('batchPinkOutStore', allCheck.checkedRows)
  onLoad()
}

// 确认已拣货出仓
async function confirmPinkOutStore () {
  // 没选订单提示
  if (!allCheck.checkedRows.length) return ElMessage.warning('请选择需拣货出仓的订单！')
  const res = await confirmPickApi(allCheck.checkedRows.map(item => item.cardId))
  if (res.code === __code) {
    ElMessage.success('确认出仓成功！\n订单将流转到【待发货订单列表】')
    await onLoad()
  }
}
// 批量发货
function onBatchSend () {
  // 没选订单提示
  if (!allCheck.checkedRows.length) return ElMessage.warning('请选择需发货的订单！')
  orderLogisticsDialog.open = true
  orderLogisticsDialog.cardIds = allCheck.checkedRows.map(row => row.cardId)
}
// 获取表格数据
async function onLoad ({trackingNo = '', orderNo = ''} = {}) {
  loading.value = true
  const res = await getOutOrderListApi({
    pageNo: pagination.currentPage,
    pageSize: pagination.pageSize,
    cardStatus: props.cardStatus,
    trackingNo,
    orderNo
  })
  if (res.code === __code) {
    table.rows = (res.data?.list || []).map(item => Object.assign(item, item.cardInfo, {checked: false}))
    pagination.total = res.data?.total || 0
  }
  loading.value = false
}

function resetLoad ({trackingNo = '', orderNo = ''} = {}) {
  pagination.currentPage = 1
  onLoad({trackingNo, orderNo})
}

onMounted(() => {
  onLoad()
})

defineExpose({
  onLoad,
  resetLoad
})

</script>

<style lang="less" module="styles" src="./index.less"></style>
